<!--
  Test/Development/Documentation page
  - enable web server file access
  - upload to web file path, e.g. /sd/dev/filedialog.htm
  - open in framework by e.g. http://test1.local/#/dev/filedialog.htm
-->

<div class="filedialog" id="fileselect"/>

<div class="panel panel-primary">
  <div class="panel-heading">FileDialog Test</div>
  <div class="panel-body">

    <h2>Dynamic API</h2>

    <p>
      <button class="btn btn-default" id="action-load">Load</button>
      <button class="btn btn-default" id="action-save">Save</button>
    </p>
    <pre id="log"/>

    <h2>Data API</h2>

    <div class="input-group">
      <input type="text" class="form-control font-monospace" placeholder="Enter file name"
        name="filename" id="input-filename" value="" autocapitalize="none" autocorrect="off"
        autocomplete="section-demo" spellcheck="false">
      <div class="input-group-btn">
        <!-- use data-toggle="filedialog", data-target & data-input on the button: -->
        <button type="button" class="btn btn-default" data-toggle="filedialog" data-target="#fd-api" data-input="#input-filename">Select</button>
      </div>
    </div>

    <!-- This is the file dialog triggered by the button: -->
    <div class="filedialog" id="fd-api" data-options='{
      "title": "This is a data API dialog",
      "path": "/sd/foo/",
      "quicknav": ["/sd/", "/sd/foo/", "/sd/bar"]
    }' />
    <!-- …that's it, no JS code necessary.
      Note: JSON syntax needs to be strict here, see JS console for errors.
    -->

  </div>
</div>

<script>

// =======================================================================================
// FileDialog is a Dialog with an embedded FileBrowser.
// 
// The input object combines the dialog button and the file browser data.
// 
// Options:
//     title: 'Select file',              -- dialog title
//     submit: 'Select',                  -- label of submit button
//     select: 'f',                       -- 'f' = only files selectable (default), 'd' = only directories
//     onSubmit: null,                    -- callback function(input)
//     onCancel: null,                    -- callback function(input)
// 
// …inherited from FileBrowser:
//     path: '',
//     quicknav: ['/sd/', '/store/'], 
//     filter: null,
//     sortBy: null,
//     sortDir: 1,
// 
// …inherited from Dialog:
//     backdrop: true,
//     keyboard: true,
//     transition: 'fade',
//     size: 'lg',
//     onUpdate: null,
// 

// Init dialog:
$("#fileselect").filedialog({
  path: '/store/scripts/',
  quicknav: ['/store/scripts/', '/store/events/', '/store/obd2ecu/'],
});

$('#action-load').on('click', function(){
  $('#log').empty();
  $("#fileselect").filedialog('show', {
    title: "Load Script",
    submit: "Load",
    onSubmit: function(input) {
      // This is called when the user doubleclicks an entry or presses Enter in a directory.
      // Note: you need to check if input.file is valid (empty = directory selected).
      if (input.file)
        $('#log').text('Loading: "' + input.path + '"\n');
      else
        $('#log').text('Directory selection: "' + input.path + '"\n');
    },
    onCancel: function(input) {
      // This is called when the user cancels or closes the dialog.
      $('#log').text('Load cancelled\n');
    },
  });
});

$('#action-save').on('click', function(){
  $('#log').empty();
  $("#fileselect").filedialog('show', {
    title: "Save Script",
    submit: "Save",
    onSubmit: function(input) {
      if (input.file)
        $('#log').text('Saving: "' + input.path + '"\n');
      else
        $('#log').text('Directory selection: "' + input.path + '"\n');
    },
    onCancel: function(input) {
      $('#log').text('Save cancelled\n');
    },
  });
});

</script>
